<script setup lang='ts'>
import ChannelNav from '@/components/ChannelNav.vue';
import ArticleList from '@/components/ArticleList.vue';
import { onMounted, ref } from 'vue';
import { getChannelAPI } from '@/api/channel';
import type { ChannelItem } from '@/types';
import { useChannel } from '@/hooks/channel';
// onMounted(()=>{
//     getChannel()
// })
// // 激活id
// const activeId = ref(0)
// const channelList = ref<ChannelItem[]>([])
// const getChannel = async ()=>{
//     const result = await getChannelAPI()
//     channelList.value = result.channels
//     activeId.value = result.channels[0].id
// }
// const changeId = (id:number)=>{
//     activeId.value = id
// }
const { activeId, channelList } = useChannel()
</script>

<template>
    <!-- 频道 -->
    <!-- <ChannelNav :channels="channelList" :active-id="activeId" @update-active-id="changeId"></ChannelNav> -->
    <ChannelNav :channels="channelList" :active-id="activeId" @update-active-id="activeId = $event"></ChannelNav>
    <!-- 列表 -->
    <ArticleList :active-id="activeId"></ArticleList>
    <div class="fix">
        <!-- 详情进入的页面 -->
        <router-view></router-view>
    </div>
</template>

<style scoped>

.fix {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}
</style>